<template>
  <view id="page">

    <!-- 底部版权声明栏 -->
    <view id="about" v-if="isWidescreen" space="nbsp">
      <text>欢迎体验uni-im &#8203;</text>
      <uni-link href="https://ext.dcloud.net.cn/plugin?id=9711" text="[点此下载插件]"></uni-link>
    </view>

    <!-- #ifdef H5 -->
    <!-- 布局最左侧 菜单栏 -->
    <view id="left-view" v-if="isWidescreen" @click="chatInfoIsShow = false;">
      <cloud-image class="user-avatar" @click="toUcenter" :src="avatarUrl" width="40px" height="40px"
                   borderRadius="100px"></cloud-image>
      <!-- {{currentUserInfo.username}} -->
      <uni-badge size="small" :text="unreadMsgCount" absolute="rightTop" type="error">
        <uni-icons class="chat-icon" @click="showContactsView = false"
                   :color="showContactsView?'#c5c5c5':'#5fc08e'" size="32" type="chatbubble-filled"></uni-icons>
      </uni-badge>
      <uni-badge size="small" :text="unreadnotificationCount" absolute="rightTop" type="error">
        <uni-icons @click="showContactsView = true" :color="showContactsView?'#5fc08e':'#c5c5c5'" size="32"
                   type="staff-filled"></uni-icons>
      </uni-badge>
    </view>
    <!-- #endif -->

    <!-- 会话列表 -->
    <view id="center-view">
      <!-- #ifdef H5 -->
      <!-- 搜索会话用户、聊天记录... -->
      <view id="search-bar-box" v-if="isWidescreen" @click="clickSearchBarBox">
        <uni-search-bar :readonly="true" id="search-bar" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none"
        ></uni-search-bar>
        <uni-icons  color="#848386" size="26" type="plus"></uni-icons>
      </view>
      <view id="uni-im-contacts-box" v-show="isWidescreen && showContactsView">
<!--        <uni-im-contacts @clickMenu="clickMenu" id="uni-im-contacts"></uni-im-contacts>-->
      </view>
      <!-- #endif -->

      <!-- #ifdef H5 -->
      <scroll-view id="user-list-box" scroll-y="true" @scrolltolower="loadMore()">
        <!-- #endif -->
        <!-- 会话用户列表 -->
        <uni-list class="user-list" :style="{'height':wHeight,'width':'750rpx'}" :border="false">

          <uni-list-chat @contextmenu.prevent.native="toChat(item.id)"
                         v-for="(item,index) in conversationList" :key="item.id" :showBadge="item.unreadCount>0"
                         :badgeText="item.unreadCount" link :title="item.title" class="user-list-item"
                         :class="{activeConversation:currentConversationId==item.id}" :note="item.lastMsgNote"
                         :avatar="item.avatar&&item.avatar ? item.avatar : '/static/avatarUrl.png'"
                         @click="toChat(item.id)" direction="column" :time="friendlyTime(item.updateTime)"
                         :hasCallMe="1"
          >
            <template v-slot:header>
              <text class="group-icon" v-if="item.type === 1">群</text>
            </template>
          </uni-list-chat>


          <!-- #ifdef APP-NVUE -->
          <!-- nvue端appear（元素一旦显示在可视窗口中）就触发加载更多。-->
          <cell v-if="conversationList.length" @appear="loadMore()"></cell>
          <!-- #endif -->
          <uni-list-item :customStyle="{backgroundColor:'#f5f5f5',padding:0}">
            <template v-slot:body>
              <uni-load-more class="tip" :contentText="loadMoreContentText"
                             :status="conversationHasMore?'loading':'noMore'"></uni-load-more>
            </template>
          </uni-list-item>
        </uni-list>
        <!-- #ifdef H5 -->
      </scroll-view>
      <!-- #endif -->
    </view>

    <!-- #ifdef H5 -->
    <view id="right-view" v-if="isWidescreen">
      <!-- 聊天窗口 -->
      <view id="chat-view-box">
        <template v-if="!showContactsView && currentConversationId">
          <view id="chat-header" v-if="!showContactsView">
            <!-- 群标题 -->
            <text :selectable="true">{{currentConversation.title}}</text>
            <uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons>
          </view>
          <view id="chat-view">
            <chat-view ref="chat-view"></chat-view>
          </view>
          <view v-if="chatInfoIsShow" class="chatInfoBox" @click.stop="chatInfoIsShow = false">
            <uni-im-group-info @click.native.stop v-if="currentConversation.group_id"
                               :conversation_id="currentConversation.id"></uni-im-group-info>
            <uni-im-chat-info @click.native.stop v-else
                              :conversation_id="currentConversation.id"></uni-im-chat-info>
          </view>
        </template>
        <view v-else id="ccid-is-null-tip">
          未选择会话对象
        </view>
      </view>
      <view id="dynamic-component-box" v-show="showContactsView">
        <view class="dynamic-component-title">{{view2Title}}</view>
        <component ref="dynamicComponent" :is="dynamicComponentName"></component>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import toFriendlyTime from '@/lib/toFriendlyTime.js';


// const db = uniCloud.database();
// #ifdef H5
import chatView from '@/pages/chat/chat';
// #endif
// import uniImUtils from '@/uni_modules/uni-im/common/utils.js';

// import {
//   store as uniIdStore,
//   mutations as uniIdMutations
// } from '@/uni_modules/uni-id-pages/common/store.js';

// import uniIm from '@/uni_modules/uni-im/lib/main.js';

import contacts from '@/pages/contacts/contacts';

// #ifdef H5
import notification from '@/pages/contacts/notification/notification';
import addPeopleGroups from '@/pages/contacts/addPeopleGroups/addPeopleGroups';
// import groupList from '@/uni_modules/uni-im/pages/contacts/groupList/groupList';
// import createGroup from '@/uni_modules/uni-im/pages/contacts/createGroup/createGroup';
// import chatInfo from '@/uni_modules/uni-im/pages/chat/info';
// import groupInfo from '@/uni_modules/uni-im/pages/group/info';


// #endif

let lastConversationId = false

let sortIndex = 0

export default {
  // #ifdef H5
  components: {
    chatView,
    // "uni-im-contacts": contacts,
    "uni-im-notification": notification,
    "uni-im-addPeopleGroups": addPeopleGroups,
    // "uni-im-groupList": groupList,
    // "uni-im-createGroup": createGroup,
    // "uni-im-chat-info": chatInfo,
    // "uni-im-group-info": groupInfo
  },
  // #endif
  data() {
    return {
      wHeight: 'auto',
      userInfo: {},
      dynamicComponentName: 'uni-im-addPeopleGroups', //通过动态组件引入页面在pc端显示
      view2Title: '加人/加群',
      showContactsView: false,
      chatInfoIsShow: false,
      currentConversation: {}
    };
  },
  computed: {
    conversationList(){
      sortIndex ++
      // console.log('根据会话时间排序',uniIm.conversation.dataList,sortIndex)
      let conversationList =  this.$ws.state.conversation.dataList;  // uniIm.conversation.dataList
      setTimeout(()=> {
        sortIndex = 0
      }, 1000);
      if(sortIndex > 6){
        return conversationList
      }
      return conversationList;
      // const that = this;
      // return conversationList.sort(function(a, b) {
      //   // if(b.id == uniIm.currentConversationId) {
      //   if(b.id == that.$ws.currentConversationId) {
      //     // 当前会话正在输入时，不需要重新排序避免change频繁触发导致排序频繁
      //     return 0
      //   }
      //   // 如果该会话的输入框已经输入了内容未发就排在前面
      //   if(b.chatText){
      //     b.update_time = Date.now()
      //   }
      //
      //   let a_update_time = a.update_time || 0
      //   let b_update_time = b.update_time || 0
      //
      //   // let aml = a.msgList.length
      //   // let bml = b.msgList.length
      //   //
      //   // if (aml) {
      //   //   let create_time = a.msgList[aml - 1].create_time
      //   //   if (create_time > a_update_time) {
      //   //     a_update_time = create_time
      //   //   }
      //   // }
      //   // if (bml) {
      //   //   let create_time = b.msgList[bml - 1].create_time
      //   //   if (create_time > b_update_time) {
      //   //     b_update_time = create_time
      //   //   }
      //   // }
      //   return b_update_time - a_update_time
      // })
    },
    loadMoreContentText() {
      return {
        contentrefresh: "正在加载...",
        contentnomore: (this.conversationList.length ? "没有更多数据了" : "没有会话数据")
      }
    },
    conversationHasMore() {
      // return uniIm.conversation.hasMore
      return this.$ws.state.conversation.hasMore
    },
    // 导入uniIm响应式数据，支持别名：比如:['a as b']
    // ...uniIm.mapState(['currentConversationId', 'isWidescreen']),
    currentConversationId(){
      return 100;
    },
    isWidescreen(){
      return this.$ws.state.isWidescreen;
    },
    unreadMsgCount() {
      // return uniIm.conversation.unreadCount()
      return this.$ws.state.conversation.unreadCount()
    },
    unreadnotificationCount() {
      // return uniIm.notification.unreadCount()
      return 0;
    },
    currentUserInfo() {
      // return uniIdStore.userInfo
      return this.$ws.getSelfUser();
    },
    avatarUrl() {
      // if (this.currentUserInfo.avatar_file && this.currentUserInfo.avatar_file.url) {
      //   return this.currentUserInfo.avatar_file.url
      // }

      if (this.currentUserInfo.avatar ) {
        return this.currentUserInfo.avatar
      }
      return '/static/avatarUrl.png'
    }
  },
  watch: {
    unreadMsgCount(unreadMsgCount) {
      console.log({
        unreadMsgCount
      });

      // #ifdef APP
      plus.runtime.setBadgeNumber(unreadMsgCount)
      // #endif

      if (unreadMsgCount == 0) {
        uni.removeTabBarBadge({
          index: 0,
          complete: (e) => {
            console.log(e)
          }
        })
      } else {
        uni.setTabBarBadge({
          index: 0,
          text: unreadMsgCount + '',
          complete: (e) => {
            // console.log(e)
          }
        })
      }
    },
    showContactsView(showContactsView) {
      if (showContactsView) {
        lastConversationId = this.currentConversationId
        // uniIm.currentConversationId = false
        this.$ws.state.currentConversationId = false
      } else {
        if (lastConversationId) {
          // uniIm.currentConversationId = lastConversationId
          this.$ws.state.currentConversationId = lastConversationId
          this.$nextTick(() => {
            this.toChat(lastConversationId)
          })
        }
      }
    },
    async currentConversationId(id) {
      // this.currentConversation = await uniIm.conversation.get(id); 可能会调用服务信息。
      this.currentConversation = await this.$ws.state.conversation.getConversation(id)
    }
  },
  created() {
    // #ifdef APP-NVUE
    this.wHeight = uni.getSystemInfoSync().windowHeight + 'px'
    // #endif
  },
  async onLoad(param) {
    let {
      token,
      user_id,
      conversation_id,
      joinGroup
    } = param

    let version = "2023-05-22-01"
    // 发布新版本后，清理旧版本下的storage避免脏数据引发问题
    let lastVersion = uni.getStorageSync('uni-im-storage-version')
    if (lastVersion && lastVersion != version) {
      uni.setStorageSync('uni-im-storage-version', version)
      uni.clearStorage()
    }

    // let {
    //   tokenExpired
    // } = uniCloud.getCurrentUserInfo()
    // if (!tokenExpired || tokenExpired < Date.now()) {
    //   console.info('当前用户的登录状态无效，将自动跳转至登录页面。', param)
    //   let url = '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl='
    //   let paramString = '/uni_modules/uni-im/pages/index/index?'
    //   for (let key in param) {
    //     paramString += `${key}=${param[key]}&`
    //   }
    //   paramString = paramString.substring(0, paramString.length - 1) //携带参数，实现登录成功后 跳回首页时传回
    //   url += encodeURIComponent(paramString)
    //   return uni.reLaunch({
    //     url
    //   })
    // }
    this.$nextTick(() => {
      this.init({
        user_id,
        conversation_id
      })
    })

    this.onLoginSuccess = async () => {
      this.init({
        user_id,
        conversation_id
      })
    }

    uni.$on('uni-id-pages-login-success', this.onLoginSuccess)
    uni.$on('uni-im-toChat', param => {
      if (param) {
        // 关闭最后一次的会话id，防止切回后重新显示最后一次会话，而邮箱指定显示到某个会话
        lastConversationId = false
        this.toChat(param)
      }
      this.showContactsView = false
    })

    /**
     * 在本页面链接传递参数 joinGroup=group_id即可申请加入群，
     * 比如：http://localhost:8082/#/uni_modules/uni-im/pages/index/index?joinGroup=xxx
     */
    if(joinGroup){
      let group_id = joinGroup
      // #ifdef H5
      //删除地址栏的token，且不刷新页面
      history.pushState({}, '', '/#/');
      // #endif
      console.log('group_id',group_id);
      db.collection('uni-im-group-join').add({
        group_id,
        "message":''
      }).then((res) => {
        console.log("res: ",res);
        uni.showToast({
          icon: 'none',
          title: '已申请'
        })
      }).catch((err) => {
        uni.showModal({
          content: err.message || '请求服务失败',
          showCancel: false
        })
      })
    }
  },
  async onReady() {
    // #ifdef H5
    let systemInfo = uni.getSystemInfoSync()
    // uniIm.systemInfo = systemInfo
    this.$ws.state.systemInfo = systemInfo
    // console.log('systemInfo',systemInfo);
    if (!['edge', 'chrome', 'safari'].includes(systemInfo.browserName)) {
      let newElement = document.createElement('div')
      newElement.innerHTML = `
				<div style="background: #fff9ea;color: #ff9a43;position: fixed;top: 0;left: 0;width: 100vw;padding: 15px;font-size: 18px;">
					注意：本系统仅兼容chrome、edge、safari浏览器
				</div>
				`
      document.body.appendChild(newElement)
    }
    // #endif
  },
  onUnload() {
    uni.$off('uni-id-pages-login-success', this.onLoginSuccess)
  },
  onShow() {
    this.initUnreadCount({});
  },
  onHide() {},
  methods: {
    clickSearchBarBox(){
      uni.showToast({
        title: '暂不支持',
        icon: 'none'
      });
    },
    async loadMore() {
      // let data = await uniIm.conversation.loadMore()
      let data = await this.$ws.getConversationList();
      return data.data;
    },
    clickMenu(data) {
      // console.log('79879789798898798978789', data);
      this.dynamicComponentName = data.componentName

      if (data.title) {
        this.view2Title = data.title
      }

      if (data.param) {
        this.$nextTick(() => {
          this.$refs.dynamicComponent.setParam(data.param)
        })
      }
      // console.log('data.componentName----',data.componentName);
      if (data.componentName == 'uni-im-createGroup') {
        this.$nextTick(() => {
          this.$refs.dynamicComponent.getFriendsData()
        })
      }
    },
    readQrCode() {
      uni.scanCode({
        complete: (e) => {
          // console.log(e);
          try {
            let data = JSON.parse(e.result)
            // console.log(data);
            if (data.type == 'uni-im' && data.subType == "groupInfo") {

            }
          } catch (e) {
            //TODO handle the exception
          }
        }
      })
    },
    async init({
                 conversation_id,
                 user_id
               }) {
      // 初始化会话列表
      // console.log('初始化会话列表',{
      // 	conversation_id,
      // 	user_id,
      // });

      await this.loadMore()
      if (conversation_id) {
        // console.log('conversation_id', conversation_id);
        this.toChat(conversation_id)
      } else if (user_id) {
        //创建会话
        // const currentConversation = await uniIm.conversation.get({
        //   friend_uid: user_id
        // })
        // console.log('currentConversation', currentConversation);
        // 当前用户给对方发个消息
        this.toChat(currentConversation.id)
      } else {
        if (this.isWidescreen) {
          let [firstConversation] = this.conversationList
          if (firstConversation) {
            // this.currentConversation = await uniIm.conversation.get(firstConversation.id)
            this.currentConversation = await this.$ws.state.conversation.getConversation(firstConversation.id)
            this.toChat(firstConversation.id)
          } else {
            // uni.showModal({
            // 	content: '没有任何会话，请先到用户列表选择用户',
            // 	showCancel: false
            // });
          }
        }
      }
    },
    search(e) {
      // console.log("search-e: " + JSON.stringify(e));
      uni.showToast({
        title: '加好友功能入口，暂时在左侧菜单的通讯录中',
        icon: 'none',
        duration: 3000
      });
    },
    addUser() {
      uni.showToast({
        title: '加好友功能入口，暂时在左侧菜单的通讯录中',
        icon: 'none',
        duration: 3000
      });
    },
    async toChat(param) {
      this.chatInfoIsShow = false;
      // console.log('param',param);
      let conversation_id = ''
      if (typeof param == 'string') {
        conversation_id = param
      } else {
        if (param.conversation_id) {
          conversation_id = param.conversation_id
        } else if (param.group_id) {
          conversation_id = 'group_' + param.group_id
        } else if (param.user_id || param.friend_uid) {
          // conversation_id = uniImUtils.getConversationId(param.user_id || param.friend_uid)
           conversation_id = 0;
          // console.log('conversation_id',conversation_id)
        } else {
          throw new Error("toChat param is error")
        }
      }
      // uniIm.currentConversationId = conversation_id
      this.$ws.state.currentConversationId = conversation_id
      if (this.isWidescreen) { //若为宽屏，则触发右侧详情页的自定义事件，通知右侧窗体刷新详情
        this.$nextTick(() => {
          let chatViewRef = this.$refs['chat-view']
          if (chatViewRef) {
            chatViewRef.load(conversation_id)
          }
        })
      } else { // 若为窄屏，则打开新窗体，在新窗体打开详情页面
        uni.navigateTo({
          url: '/pages/chat/chat?conversation_id=' + conversation_id,
          animationDuration: 300
        })
      }
    },
    showChatInfo() {
      this.chatInfoIsShow = !this.chatInfoIsShow
    },
    toUcenter() {
      uni.navigateTo({
        url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true',
        complete(e) {
          console.log("e: " + JSON.stringify(e));
        }
      })
    },
    friendlyTime(timestamp) {
      // return uniImUtils.toFriendlyTime(timestamp)
      return toFriendlyTime(timestamp)
    },
  },
  async onReachBottom() {
    await this.loadMore()
  },
  onNavigationBarButtonTap(e) {
    // console.log(e);
    if (e.index) {
      let data = uni.getStorageInfoSync();
      // console.log('data.keys', JSON.stringify(data.keys));
      data.keys.forEach(item => {
        if (item.includes('uni-im-msg:') || item.includes('uni-im-conversation')) {
          // console.log(item);
          uni.removeStorageSync(item);
          // console.log(uni.getStorageSync(item));
        }
      });
      uni.showToast({
        title: 'clear storage ok',
        icon: 'none'
      });
    } else {
      uni.navigateTo({
        url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true',
        complete: e => {
          console.log(e);
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>